<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>消费报表</title>
    <script>
        $(document).ready(function () {
            var page = {
                pageNum : 1,
                pageSize : 10,
                pages : 0,
                total : 0
            };

            $('.form_date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });

            function query(increment) {
                if (increment < 0 && page.pageNum == 1) {
                    return;
                }
                if (increment > 0 && page.pageNum >= page.pages) {
                    return;
                }

                page.pageNum += increment;

                $.post("/admin/travel/consumeTotal", {
                    startTime : $("#formConsumeSearch input[name='startTime']").val(),
                    endTime : $("#formConsumeSearch input[name='endTime']").val()
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "共计里程：" + data.data.totalDistance + "公里, 共计费用：" + data.data.totalAmount + "元";
                        $("#consumeTotalInfo").html(html);
                    }
                });

                $.post("/admin/travel/consumeList", {
                    startTime : $("#formConsumeSearch input[name='startTime']").val().trim(),
                    endTime : $("#formConsumeSearch input[name='endTime']").val().trim(),
                    mobile : $("#formConsumeSearch input[name='mobile']").val().trim(),
                    pageNum : page.pageNum,
                    pageSize : page.pageSize
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "";
                        page.pages = data.pages;
                        page.total = data.total;
                        data.data.forEach(function (e) {
                            html += "<tr>";
                            html += "<td>" +  e.userId + "</td>";
                            html += "<td>" +  e.mobile + "</td>";
                            html += "<td>" +  e.totalDistance  + "</td>";
                            html += "<td>" +  e.totalAmount + "</td>";
                            html += "<td><button type='button' class='btn btn-xs' onclick='showChargeDetail(" + e.userId + ")' data-toggle='modal' data-target='#chargeDetailModal'>查看</button></td>";
                            html += "</tr>";
                        })
                        $("#mainTable > tbody").html(html);

                        if (page.pageNum == 1) {
                            $("#liPrePage").addClass("disabled");
                        } else {
                            $("#liPrePage").removeClass("disabled")
                        }
                        if (page.pages > 1 && page.pageNum < page.pages) {
                            $("#liNextPage").removeClass("disabled");
                        } else {
                            $("#liNextPage").addClass("disabled");
                        }
                    }

                });
            }

            $("#btSearch").click(function () {
                query(0);
            })
            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });


            query(0);

        });
    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/travel/consumer/}">消费报表</a></li>
</ol>

<form id="formConsumeSearch" class="form-inline" style="padding-bottom: 10px">
    <div class="form-group">
        <label for="mobile">用户账号</label>
        <input type="text" class="form-control" id="mobile" name="mobile" placeholder="用户账号">
    </div>
    <div class="form-group">
        <label>起止时间</label>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="startTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="endTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
    </div>
    <button id="btSearch" type="button" class="btn btn-default">搜索</button>
</form>
<div style="padding-bottom: 10px">
    <span id="consumeTotalInfo"></span>
</div>
<table id="mainTable" class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>用户账号</th>
        <th>总里程数</th>
        <th>总费用</th>
        <th>行程记录</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>

</body>
</html>